---
title: Slider
description: An input where the user selects a value from within a given range.
shadcnDocsLink: https://ui.shadcn.com/docs/components/slider
---

<ComponentPreview component="slider">
  ```tsx file=<rootDir>/src/examples/ui/slider/index.tsx
  ```
</ComponentPreview>

## Installation

<Installation component="slider">
  ```tsx file=<rootDir>/src/components/ui/slider.tsx
  ```
</Installation>

## Usage

```ts
import { Slider } from '@/components/ui/slider'
```

```tsx
<Slider defaultValue={[33]} max={100} step={1} />
```

## Examples

### Default

<ComponentPreview component="slider" example="default">
  ```tsx file=<rootDir>/src/examples/ui/slider/index.tsx
  ```
</ComponentPreview>

### Two Thumbs

<ComponentPreview component="slider" example="two-thumbs">
  ```tsx file=<rootDir>/src/examples/ui/slider/two-thumbs.tsx
  ```
</ComponentPreview>

### Vertical

<ComponentPreview component="slider" example="vertical">
  ```tsx file=<rootDir>/src/examples/ui/slider/vertical.tsx
  ```
</ComponentPreview>

### Controlled

<ComponentPreview component="slider" example="controlled">
  ```tsx file=<rootDir>/src/examples/ui/slider/controlled.tsx
  ```
</ComponentPreview>